<template>
  <div class="container">
    <div class="p-5 mb-4 bg-light rounded-3">
      <div class="container-fluid py-5">
        <h1 class="display-5 fw-bold">{{ $t("faqs.title") }}</h1>
        <p class="col-md-8 fs-4">
          {{ $t("faqs.description") }}
        </p>
        <a href="https://fed.smartsheep.space/t/faq" class="btn btn-primary btn-lg">
          {{ $t("faqs.actions.request") }}
        </a>
      </div>
    </div>

    <div>
      <ol class="list-group">
        <li
          class="list-group-item d-flex justify-content-between align-items-start"
        >
          <div class="ms-2 me-auto">
            <div class="fw-bold">
              Q: Why do I trust you didn't will give else people my personal
              data?
            </div>
            Of course you can didn't trust us, because we didn't make some
            GREAT or AMAZING things, but you really know the Google/Tencent will
            to do with your personal data?
          </div>
          <span class="badge bg-danger rounded-pill">62</span>
        </li>
        <li
          class="list-group-item d-flex justify-content-between align-items-start"
        >
          <div class="ms-2 me-auto">
            <div class="fw-bold">
              Q: Where is the security center?
            </div>
            A: We didn't completed common user center yet, we already processing!
          </div>
          <span class="badge bg-success rounded-pill">99</span>
        </li>
        <li
          class="list-group-item d-flex justify-content-between align-items-start"
        >
          <div class="ms-2 me-auto">
            <div class="fw-bold">Q: What about this pricing?</div>
            A: Free, for now, but we didn't open source this project. For the
            safety reasons.
          </div>
          <span class="badge bg-success rounded-pill">59</span>
        </li>
        <li
          class="list-group-item d-flex justify-content-between align-items-start"
        >
          <div class="ms-2 me-auto">
            <div class="fw-bold">Q: What is this technology stack</div>
            A: We build this by NestJS, Prisma, Mysql + Bootstrap5, NaiveUI, VueJS + Mailjet
          </div>
          <span class="badge bg-primary rounded-pill">14</span>
        </li>
        <li
          class="list-group-item d-flex justify-content-between align-items-start"
        >
          <div class="ms-2 me-auto">
            <div class="fw-bold">Q: Where is my data?</div>
            A: Our server is in China, Shenzhen, Baoan, we also have server in USA and Hongkong
          </div>
          <span class="badge bg-danger rounded-pill">9</span>
        </li>
      </ol>
    </div>
  </div>
</template>

<script>
export default {
  name: "FAQsPage",
};
</script>

<style scoped></style>
